<!-- 角色管理 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" :showBack="true"></pageHeaderNew>
    </template>
    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>
      <div>
        <a-space>
          <a-button type="primary" @click="openModal">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增对象角色权限</template>
          </a-button>
        </a-space>
      </div>
    </div>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="60" title="序号" fixed="left" align="content">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="roleName"
        title="关联角色名称"
        align="content"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="objName"
        title="关联对象名称"
        align="content"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="roleName"
        title="关联对象类型"
        align="content"
      >
        <template #cell="{ record }">{{
          setRelObjType.filter((ele) => ele.id === record.relObjType)[0].value
        }}</template>
      </a-table-column>

      <!-- <a-table-column :width="150" dataIndex="describe" title="最后活跃时间">
        <template #cell="{ record }">{{
          dayjs(record.updatedAt).format('YYYY-MM-DD')
        }}</template>
      </a-table-column> -->
      <a-table-column :width="150" title="操作">
        <template #cell="{ record }">
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="确认删除?" type="error" @ok="del(record)">
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>

  <ObjPermissionModel
    v-model:visible="ObjPermissionModelVisible"
    v-if="ObjPermissionModelVisible"
    :masterRoleId="masterRoleId"
    @setObjPermission="setObjPermission"
  ></ObjPermissionModel>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import ObjPermissionModel from './components/ObjPermissionModel.vue';
import {
  getObjRoleRelList,
  delObjRoleRel,
  postObjRoleRel
} from '@/apis/roleManagement/index';
import dayjs from 'dayjs';

const title = '配置对象角色权限';
const modelVisible = ref(false);
const route = useRoute();
const router = useRouter();
const tableRef = ref();
const masterRoleId = Number(route.query.roleId);
console.log('router', router.currentRoute.value.fullPath);
const ObjPermissionModelVisible = ref(false);
const setRelObjType = [
  { id: 1, value: '用户' },
  { id: 2, value: '用户组' },
  { id: 3, value: '组织' },
  { id: 4, value: '职位' }
];

const getTableData = async (page: any) => {
  try {
    const res = await getObjRoleRelList({
      ...page,
      masterType: 2,
      masterId: masterRoleId
    });
    console.log(res);
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};

// const setObjPermission = async (res: any) => {
//   try {
//     await putObjRoleRel({ ...res });
//     tableRef.value.loadData();
//   } catch (err: unknown) {
//     console.log(err);
//   }
// };

const setObjPermission = async (res: any) => {
  try {
    await postObjRoleRel({ ...res });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const del = async (res: any) => {
  try {
    const ids = [res.id];
    await delObjRoleRel({ ids });
    tableRef.value.loadData();
  } catch (error) {
    console.log(error);
  }
};

const openModal = () => {
  ObjPermissionModelVisible.value = true;
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
